<!-- 任务管理 -->
<template>
  <div class="journal">
    <el-card class="!border-none" shadow="never">
      <el-form class="ls-form" :model="formData" inline>
        <el-form-item label="jobGroup">
          <el-select
            class="w-[280px]"
            v-model="formData.jobGroup"
            placeholder="执行器"
          >
            <el-option
              v-for="(item, index) in jobinfoInit.JobGroupList"
              :key="index"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="jobHandler">
          <el-input
            class="w-[280px]"
            placeholder="请输入jobHandler"
            v-model="formData.executorHandler"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>
        <el-form-item label="负责人">
          <el-input
            class="w-[280px]"
            placeholder="请输入负责人"
            v-model="formData.author"
            clearable
            @keyup.enter="resetPage"
          />
        </el-form-item>
        <el-form-item label="状态">
          <el-select class="w-[280px]" v-model="formData.triggerStatus">
            <el-option label="全部" value />
            <el-option label="运行" :value="1" />
            <el-option label="停止" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-row class="mb-4">
            <el-button type="primary" @click="resetPage" round>查询</el-button>
            <el-button style="margin-left: 10px" @click="resetParams" round
              >重置</el-button
            >
          </el-row>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="!border-none mt-4" shadow="never" v-loading="pager.loading">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <div style="margin-top: 10px">
        <el-table :data="pager.lists" size="large">
          <!-- <el-table-column label="记录ID" prop="operId" /> -->
          <el-table-column label="id" prop="id" min-width="140" />
          <el-table-column prop="jobDesc" label="任务描述" min-width="100" />
          <el-table-column label="调度类型" prop="scheduleType" min-width="160">
            <template #default="{ row }">
              {{ row.scheduleType + " " + row.scheduleConf }}
            </template>
          </el-table-column>
          <el-table-column label="运行模式" prop="glueType" min-width="160">
            <template #default="{ row }">
              {{ row.glueType + " " + row.executorHandler }}
            </template>
          </el-table-column>
          <el-table-column
            label="负责人"
            prop="author"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column label="状态" prop="triggerStatus" min-width="160">
            <template #default="{ row }">
              {{ row.triggerStatus == 0 ? "停止" : "运行" }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="160" fixed="right">
            <template #default="{ row }">
              <el-dropdown size="small" type="primary" split-button>
                操作
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="satrtJob(row.id)"
                      >启动</el-dropdown-item
                    >
                    <el-dropdown-item @click="handleEdit(row)"
                      >编辑</el-dropdown-item
                    >
                    <el-dropdown-item @click="handleDelete(row.id)"
                      >删除</el-dropdown-item
                    >
                    <el-dropdown-item divided @click="execFirst(row)"
                      >执行一次</el-dropdown-item
                    >
                    <el-dropdown-item>
                      <router-link
                        :to="{
                          path: '/joblog',
                          query: {
                            jobId: row.id,
                            jobGroup: row.jobGroup,
                          },
                        }"
                      >
                        查询日志
                      </router-link>
                    </el-dropdown-item>
                    <el-dropdown-item @click="nextExecTime(row.id)"
                      >下次执行时间</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex mt-4 justify-end">
        <pagination v-model="pager" @change="getLists" />
      </div>
    </el-card>
    <edit-popup
      v-if="showEdit"
      ref="editRef"
      @success="getLists"
      @close="showEdit = false"
    />

    <popup
      ref="popupRef"
      title="执行一次参数"
      :async="true"
      width="550px"
      @confirm="handleExecSubmit"
      @close="handleExecClose"
    >
      <el-form ref="formRef" :model="excuFirstJobData" label-width="84px">
        <el-form-item label="AppName" prop="executorParam">
          <el-input
            v-model="excuFirstJobData.executorParam"
            placeholder="请输入任务执行参数"
            clearable
            :maxlength="100"
          />
        </el-form-item>
        <el-form-item label="执行地址" prop="addressList">
          <el-input
            v-model="excuFirstJobData.addressList"
            placeholder="请输入本次执行的机器地址,为空表示从执行器获取"
            clearable
          />
        </el-form-item>
      </el-form>
    </popup>
  </div>
</template>

<script lang="ts" setup name="post">
import type { FormInstance } from "element-plus";
import {
  pageListjobinfo,
  jobinfoIndex,
  removejobinfo,
  stopjobinfo,
  startjobinfo,
  triggerjobinfo,
  nextTriggerTimejobinfo,
} from "@/api/system/jobapi";
import { usePaging } from "@/hooks/usePaging";
import feedback from "@/utils/feedback";
import Popup from "@/components/popup/index.vue";
import EditPopup from "./edit.vue";
const editRef = shallowRef<InstanceType<typeof EditPopup>>();
const showEdit = ref(false);
const jobinfoInit = ref({});
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();

const formData = reactive({
  jobGroup: undefined,
  triggerStatus: undefined,
  executorHandler: "",
  author: "",
});

const excuFirstJobData = reactive({
  id: "",
  executorParam: "",
  addressList: "",
});

const { pager, getLists, resetPage, resetParams } = usePaging({
  fetchFun: pageListjobinfo,
  params: formData,
});

console.log("pager", pager);

/**
 * 初始化操作
 */
const init = async () => {
  jobinfoIndex().then((res) => {
    console.log("jobinfoInit", jobinfoInit);

    jobinfoInit.value = res;
  });
};

const handleAdd = async () => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("add");
};

const handleEdit = async (data: any) => {
  showEdit.value = true;
  await nextTick();
  editRef.value?.open("edit");
  editRef.value?.getDetail(data);
};

const handleDelete = async (id: number) => {
  await feedback.confirm("确定要删除？");
  await removejobinfo(id);
  feedback.msgSuccess("删除成功");
  getLists();
};

//停止

const stopJob = async (id: any) => {
  await feedback.confirm("确定停止此任务？");
  stopjobinfo(id).then((res) => {
    feedback.msgSuccess("任务已停止");
    getLists();
  });
};

const satrtJob = async (id: any) => {
  await feedback.confirm("确定启动此任务？");
  startjobinfo(id).then((res) => {
    feedback.msgSuccess("启动完成");
    getLists();
  });
};

/**
 * 打开执行一次
 */
const execFirst = async (row: any) => {
  excuFirstJobData.id = row.id;
  popupRef.value?.open();
};

/**
 * 执行一次
 */
const handleExecSubmit = async () => {
  await formRef.value?.validate();
  triggerjobinfo(formRef).then((res) => {
    feedback.msgSuccess("操作成功");
    popupRef.value?.close();
    getLists();
  });
};

/**
 * 下次执行时间
 */
const nextExecTime = (row: any) => {
  nextTriggerTimejobinfo({ scheduleType: "", scheduleConf: "" }).then((res) => {
    let html = "";
    for (let index = 0; index < res.length; index++) {
      const element = res[index];
      html += "<h3>" + element + "</h3>";
    }
    feedback.alertHtml(html);
  });
};

init();
getLists();
</script>

<style lang="scss" scoped>
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: -15px;
}
</style>
